<template>
  <a-card style="margin-top: 24px" :bordered="false">
    <a-list
      size="large"
      rowKey="id"
      :loading="loading"
      itemLayout="vertical"
      :dataSource="dataSource"
    >
      <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
        <template slot="actions">
          <icon-text type="star-o" :text="item.star" />
          <icon-text type="like-o" :text="item.like" />
          <icon-text type="message" :text="item.message" />
        </template>
        <a-list-item-meta>
          <a slot="title" href="https://vue.ant.design/">{{ item.title }}</a>
          <template slot="description">
            <span>
              <a-tag>Ant Design</a-tag>
              <a-tag>设计语言</a-tag>
              <a-tag>蚂蚁金服</a-tag>
            </span>
          </template>
        </a-list-item-meta>
        <div class="antd-pro-components-article-list-content-index-listContent">
          <div class="description">
            <slot>
              {{ item.description }}
            </slot>
          </div>
          <div class="extra">
            <a-avatar :src="item.avatar" size="small" />
            <a :href="item.href">{{ item.owner }}</a> 发布在
            <a :href="item.href">{{ item.href }}</a>
            <em>{{ item.updateAt | item.moment }}</em>
          </div>
        </div>
        <!-- <article-list-content :description="item.description" :owner="item.owner" :avatar="item.avatar" :href="item.href" :updateAt="item.updatedAt" /> -->
      </a-list-item>
      <div
        slot="footer"
        v-if="data.length > 0"
        style="text-align: center; margin-top: 16px"
      >
        <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
      </div>
    </a-list>
  </a-card>
</template>

<script>
export default {
  name: "articleList",
  props: {
    dataSource: {
      type: Array,
    },
  },
  data() {
    return {
      loading: true,
      loadingMore: false,
    };
  },
  // mounted() {
  //   this.getList();
  // },
  methods: {
    loadMore() {
      //   this.loadingMore = true;
      //   this.$http
      //     .get("/list/article")
      //     .then((res) => {
      //       this.data = this.data.concat(res.result);
      //     })
      //     .finally(() => {
      //       this.loadingMore = false;
      //     });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../index.less";

.antd-pro-components-article-list-content-index-listContent {
  .description {
    max-width: 720px;
    line-height: 22px;
  }
  .extra {
    margin-top: 16px;
    color: @text-color-secondary;
    line-height: 22px;

    & /deep/ .ant-avatar {
      position: relative;
      top: 1px;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      vertical-align: top;
    }

    & > em {
      margin-left: 16px;
      color: @disabled-color;
      font-style: normal;
    }
  }
}

@media screen and (max-width: @screen-xs) {
  .antd-pro-components-article-list-content-index-listContent {
    .extra {
      & > em {
        display: block;
        margin-top: 8px;
        margin-left: 0;
      }
    }
  }
}
</style>
